<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加学生信息</title>
</head>
<body>
<table id="usertable" border="1" cellpadding="20" cellspacing=0>
    <tbody>
    <tr>
        <th>姓名</th>
        <td>
            <input type="text" name="name" id="name"/>
        </td>
    </tr>
    <tr>
        <th>性别</th>
<!--        <td><a href="deleteEmp?id=Tom">Delete</a></td>-->
        <td name="sex" id="sex">
            <input type="checkbox" >男
            <input type="checkbox">女
        </td>
    </tr>
    <tr>
        <th>年龄</th>
        <td>
            <input type="text" name="age" id="age" />
        </td>
    </tr>
    <tr>
        <th>大学</th>
        <td>
            <input type="text" name="edu" id="edu"/>
        </td>
    </tr>
    <tr>
        <th >城市</th>
      <td>
          <select style="float:left;" name="city" id="city">
          <option >北京</option>
          <option >福州</option>
          <option >厦门</option>
          <option >龙岩</option>
          <option >泉州</option>
      </select>
      </td>
    </tr>
    <tr>
        <th>学号</th>
        <td>
            <input type="text" name="no" id="no" />
        </td>
    </tr>
    <tr>
        <th>操作</th>
        <td>
            <button id="addUser">添加</button>
        </td>
    </tr>
    </tbody>
</table>
<script>
    document.getElementById("addUser").onclick = function() {
        //获取上面三个文本框的值
        var nameValue = document.getElementById("name").value;
        var sexValue = document.getElementById("sex").value;
        var ageValue = document.getElementById("age").value;
        var eduValue = document.getElementById("edu").value;
        var cityValue = document.getElementById("city").value;
        var noValue = document.getElementById("no").value;
        var tr = document.createElement("tr");
        var nameTd = document.createElement("td");
        var nameText = document.createTextNode(nameValue);
        nameTd.appendChild(nameText);
        var sexTd = document.createElement("td");
        var sexText = document.createTextNode(sexValue);
        sexTd.appendChild(sexText);
        var ageTd = document.createElement("td");
        var ageText = document.createTextNode(ageValue);
        ageTd.appendChild(ageText);
        var eduTd = document.createElement("td");
        var eduText = document.createTextNode(eduValue);
        eduTd.appendChild(eduText);
        var cityTd = document.createElement("td");
        var cityText = document.createTextNode(cityValue);
        cityTd.appendChild(cityText);
        var noTd = document.createElement("td");
        var noText = document.createTextNode(noValue);
        noTd.appendChild(noText);
        tr.appendChild(nameTd);
        tr.appendChild(sexTd);
        tr.appendChild(ageTd);
        tr.appendChild(eduTd);
        tr.appendChild(cityTd);
        tr.appendChild(noTd);
        var table = document.getElementById("usertable");
        var tbody = document.createElement("tbody");
        tbody.appendChild(tr);
        table.appendChild(tbody);
    }
</script>
</body>
</html>